import React, { lazy, Suspense } from 'react'
import { reportCheckContext } from './_context'
import useHooks from './hooks'
import CheckSearch from './components/CheckSearch'
import styles from './index.module.less'
import CheckTable from '../../components/CheckTable'
// import IndicatorsTable from './components/IndicatorsTable'
import PressureInjuryModal from '@/components/PressureInjuryModal'
import CheckVarable from './components/CheckVarable'
import { isNullArray } from '@/utils'
import PageLoading from '@/components/PageLoading'

const IndicatorsTable = lazy(() => import('./components/IndicatorsTable'))

export default () => {
  const hooksData = useHooks()

  return (
    <reportCheckContext.Provider value={hooksData}>
      <div className={styles['content-top']}>
        <CheckSearch />
        {hooksData.tag === 1 ? (
          <CheckVarable />
        ) : (
          <Suspense fallback={<PageLoading />}>
            <IndicatorsTable />
          </Suspense>
        )}
      </div>
      <div className={styles['content-bottom']}>
        <div className={styles['bottom-title']}>事件内容</div>
        {/* {isNullArray(hooksData.eventList) && ( */}
        <CheckTable
          handlePreview={hooksData.handlePreview}
          list={hooksData.eventList}
          txt={'跌倒（坠床）相关信息收集表（3）'}
        />
        {/* )} */}
      </div>
      <PressureInjuryModal {...hooksData.IndicatorsModal} onlyLook={true} />
    </reportCheckContext.Provider>
  )
}
